<template xmlns:>
  <div>
    <div>
      <van-popup
        :show="show"
        position="bottom"
        @close="onClose"
      >
      </van-popup>
    </div>
    <div>
      <van-popup
        :show="show_grade"
        position="bottom"
        @close="onClose"
      >
        <van-picker :columns="columns" @change="onChange" />
      </van-popup>
    </div>
    <div class="ex_img">
      <img src="/static/images/exam.jpg" alt="">
    </div>
      <div class="choose">
          <picker mode="multiSelector" @change="bindMultiPickerChange" :value="multiIndex" :range="newMultiArray">
              <span>选择考试时间和年级科目</span>
          </picker>
      </div>
    <div class="select">
      <div class="select_time" @click="onshow">{{time}}</div>
      <div class="select_grade" @click="onshow_grade">{{value[0]}}{{value[1]}}</div>
    </div>
    <div>
    </div>
    <div>
      <ListExam v-for="(item, index) in test"
                :key="index"
                :test="item"
                :index="index"
      />
    </div>
  </div>
</template>

<script>
  import ListExam from '@/components/list_exam.vue'
  import ExamListApi from '@/api/examList'

  const citys = {
    '一年级': ['语文', '数学', '英语'],
    '二年级': ['语文', '数学', '英语'],
    '三年级': ['语文', '数学', '英语'],
    '四年级': ['语文', '数学', '英语'],
    '五年级': ['语文', '数学', '英语'],
    '六年级': ['语文', '数学', '英语'],
    '初一': ['语文', '数学', '英语', '政治', '历史', '地理', '生物'],
    '初二': ['语文', '数学', '英语', '政治', '历史', '地理', '物理', '生物'],
    '初三': ['语文', '数学', '英语', '政治', '历史', '地理', '物理', '化学', '生物']
  }
  export default {
    name: 'list',
    data () {
      return {
        time: '',
        multiArray: [],
        multiIndex: [0, 0, 0],
        show_grade: false,
        columns: [
          {
            values: Object.keys(citys),
            className: 'column1'
          },
          {
            values: citys['一年级'],
            className: 'column2',
            defaultIndex: 4
          }
        ],
        test: [],
        index: '0',
        picker: '',
        value: ['请选择年级科目'],
        last_city: '一年级',
        currentDate: new Date().getTime(),
        minDate: new Date().getTime(),
        grade: '请选择年级科目'
      }
    },
    computed: {
      newMultiArray: () => {
        let array = []
        const date = new Date()
        const years = []
        const months = []
        const days = []
        // const hours = []
        // const minutes = []
        for (let i = 2018; i <= date.getFullYear() + 10; i++) {
          years.push('' + i)
        }
        array.push(years)
        for (let i = 1; i <= 12; i++) {
          if (i < 10) {
            i = '0' + i
          }
          months.push('' + i)
        }
        array.push(months)
        for (let i = 1; i <= 31; i++) {
          if (i < 10) {
            i = '0' + i
          }
          days.push('' + i)
        }
        array.push(days)
        for (let i = 0; i < 24; i++) {
          if (i < 10) {
            i = '0' + i
          }
        }
        return array
      }
    },
    mounted () {
      var type = '考试'
      ExamListApi.getExamList(type)
        .then((resp) => {
          console.log(resp)
          console.log(resp[0])
          this.test = resp
          this.$store.dispatch('getList', this.test)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    methods: {
      // 获取时间日期
      bindMultiPickerChange (e) {
        this.multiIndex = e.target.value
        console.log('当前选择的时间', this.multiIndex)
        const index = this.multiIndex
        const year = this.newMultiArray[0][index[0]]
        const month = this.newMultiArray[1][index[1]]
        const day = this.newMultiArray[2][index[2]]
        this.time = year + '/' + month + '/' + day + ' '
      },
      onshow () {
        this.show = true
      },
      onshow_grade () {
        this.show_grade = true
      },
      onClose () {
        this.show = false
        this.show_grade = false
      },
      sure (event) {
        this.onClose()
      },
      onChange (event) {
        console.log(event)
        this.value = event.mp.detail.value
        console.log(this.value)
        // eslint-disable-next-line eqeqeq
        if (this.value[0] != this.last_city) {
          this.columns[1].values = citys[this.value[0]]
          this.value[1] = citys[this.value[0]][0]
        }
        this.last_city = this.value[0]
      }
    },
    components: {ListExam}
  }
</script>

<style scoped>
  span{text-align:center; display: inline-block; width: 720rpx; border: solid #2aac62;}
  .ex_img{
    text-align: center;
    vertical-align: middle;
    border-bottom: 1rpx solid #eee;
  }
  .ex_img img{
    width: 200rpx;
    height: 178rpx;
  }
  .choose{
      padding: 5rpx;
      border-bottom: 1rpx solid#eee;
  }
  .select{
    display: flex;
    padding: 5rpx;
    border-bottom: 1rpx solid#eee;
  }
  .select_time{
    margin-left: 40rpx;
    margin-right: 200rpx;
    height: 50rpx;
    width: 150rpx;
    border-color: black;
    border: 1rpx solid #eee;
  }
  .select_grade{
    height: 50rpx;
    width: 300rpx;
    border-color: black;
    border: 1rpx solid #eee;
  }
</style>

